<template>
  <div ref='lishishujuMap'
    class="w1 h1"></div>
</template>
<script>
import { getChartDataList } from '@/api'

export default {
  mounted() {
    this.print()
  },
  data() {
    return {
      mapChart: {}
    }
  },
  props: ['mapData', 'currentName'],
  methods: {
    print() {
      const _t = this
      let moment = _t.moment
      _t.$nextTick(() => {
        let lishishujuMapDom = this.$refs.lishishujuMap
        _t.mapChart = _t.echarts.init(lishishujuMapDom)
        _t.mapChart.showLoading()
        let options = {
          title: {
            text: '历史数据曲线',
            subtext:
              moment(_t.mapData.timeRangeStart).format('YYYY/MM/DD') +
              '-' +
              moment(_t.mapData.timeRangeEnd).format('YYYY/MM/DD'),
            top: 0,
            left: 'center',
            textStyle: {
              fontSize: 14,
              color: '#666666'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            bottom: '5%'
          },
          grid: {
            bottom: '15%',
            top: '12%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: []
        }
        const params = { ..._t.mapData }
        getChartDataList(params).then(res => {
          if (res.code === 200 && res.data) {
            const { data } = res
            const currentName = this.currentName
            const seriesValue = []
            const time = []
            const vlaue = data.forEach(t => {
              seriesValue.push(t.value)
              time.push(moment(t.createdAt).format('YYYY-MM-DD HH:mm:ss'))
            })
            const series = [
              {
                name: currentName,
                type: 'line',
                data: seriesValue.reverse(),
                smooth: true,
                hoverAnimation: false,
                symbolSize: 6,
                itemStyle: {
                  normal: {
                    color: '#c23531'
                  }
                },
                showSymbol: false
              }
            ]
            options.series = series
            options.xAxis.data = time.reverse()
            _t.mapChart.setOption(options)
            _t.mapChart.hideLoading()
          }
        })
      })
    }
  }
}
</script>
